<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<style>
    body {
        background-color: lightgray;
    }
    
    .big {
        position: relative;
        background-color: white;
        margin: 100px auto;
        width: 1000px;
        height: 700px;
        box-sizing: border-box;
    }
    
    .b {
        color: white;
        font-size: 30px;
    }
    
    .blue {
        position: absolute;
        background-color: rgb(6, 6, 51);
        top: -50px;
        right: 100px;
        width: 430px;
        height: 590px;
        bottom: 80px;
        box-sizing: border-box;
        padding-left: 70px;
        padding-top: 150px;
    }
    
    .c {
        width: 200px;
        height: 80px;
        color: white;
        font-size: 10px;
    }
    
    .white {
        background-color: white;
        width: 100px;
        height: 40px;
        box-sizing: border-box;
        padding-top: 0.05px;
    }
    
    .e {
        color: white;
        font-size: 12px;
        text-align: center;
    }
    
    .img {
        position: absolute;
        background-color: rgb(107, 102, 102);
        width: 350px;
        height: 350px;
        right: 550px;
        bottom: 150px;
        z-index: 1;
    }
    
    .pink {
        position: absolute;
        background-color: pink;
        bottom: -5px;
        left: 200px;
        width: 350px;
        height: 250px;
        box-sizing: border-box;
        padding-top: 40px;
        padding-left: 30px;
        z-index: 1;
    }
    
    .f {
        color: white;
        font-size: 18px;
    }
    
    .g {
        color: white;
        font-size: 8px;
    }
    
    .black {
        position: absolute;
        width: 100px;
        height: 40px;
        background-color: white;
        box-sizing: border-box;
        padding-top: 0.05px;
        left: 340px;
        top: -50px;
    }
    
    .h {
        color: rgb(144, 247, 207);
        font-size: 8px;
        text-align: center;
    }
</style>

<body>
    <div class="big">
        <div class="blue">
            <h1 class="b">琵琶行</h1>
            <p class="c">沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。</p>

        </div>

        <div class="img"><img src="0.jpg"></div>
        <div class="pink">
            <h1 class="f">琵琶行</h1>
            <p class="g">忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁？琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为霓裳后六幺。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。</p>
            <div class="black">
                <p class="h">白居易</p>
            </div>
        </div>

    </div>
</body>

</html>